<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>EZOPEN播放协议</title>
    <style>
        body {
            margin: 0;
        }

        .hint {
            font-size: 14px;
            line-height: 3em;
            color: gray;
        }

        #url,
        #url2,
        #accessToken {
            width: 100%;
        }

        .btn-container {
            margin: 10px;
        }

        .normal {
            color: green;
            margin: 5px;
        }

        .error {
            color: red;
            margin: 5px;
        }
    </style>
</head>
<script>
</script>

<body>
<script src="/static/js/jquery.min.js" th:src="@{/static/js/jquery.min.js}" charset="utf-8"></script>
<script src="/static/js/ezuikit.js" th:src="@{/static/js/ezuikit.js}"></script>
<script th:src="@{/static/js/app.js}" charset="utf-8"></script>
<script src="/static/js/whysu.js" th:src="@{/static/js/whysu.js}"></script>

<div class="btn-container">
    <button id="play">播放</button>
    <button id="stop">结束</button>
    <button id="getOSDTime">获取OSD时间</button>
    <button id="openSound">打开声音（默认已经开启）</button>
    <button id="closeSound">关闭声音</button>
    <button id="capturePicture">视频截图</button>
    <button id="startSave">开始录像</button>
    <button id="stopSave">停止录像</button>
    <button id="fullScreen">全屏</button>
</div>
<input type="hidden" th:value="${deviceId}" id="deviceId">
<input type="hidden" id="ctx" th:value="${#request.getContextPath()}">
<div id="playWind"></div>
<script>
    var ctx = $("#ctx").val();
    // 适配窗口大小
    var clientWidth = document.documentElement.clientWidth - 20;
    var clientHeight = document.documentElement.clientHeight - 45;
    var decoder;

    $(document).ready(function () {
        // 适配窗口大小
        $("#playWind").css("width", clientWidth).css("height", clientHeight);
        // 获取视频地址
        getLiveAddress();
    });

    function handleError(e) {
        console.log('捕获到错误', e)
    }

    function handleSuccess() {
        console.log("播放成功回调函数，此处可执行播放成功后续动作");
    }

    function init(url, accessToken) {
        decoder = new EZUIKit.EZUIPlayer({
            id: 'playWind',
            autoplay: true,
            url: url,
            accessToken: accessToken,
            decoderPath: '/edevice/static/',
            width: clientWidth,
            height: clientHeight,
            handleError: handleError,
            handleSuccess: handleSuccess
        });
        // 这里是打印日志，本例抛出到播放页面
        // decoder.on('log', log);
    }

    function log(str, className) {
        var div = document.createElement('DIV');
        div.className = className || 'normal';
        div.innerHTML = (new Date()).Format('yyyy-MM-dd hh:mm:ss.S') + JSON.stringify(str);
        document.body.appendChild(div);
    }

    $("#start").click(function () {
        function handleError(e) {
            console.log('handleError', e)
        }

        function handleSuccess() {
            console.log('handleSuccess')
        }

        decoder.play({
            handleError: handleError
        });
    });
    $("#stop").click(function () {
        /*停止播放方法1*/
        // decoder.stop();
        /*停止播放方法2 - promise模式*/
        var stopPromise = decoder.stop();
        stopPromise.then(function () {
            console.log("关闭成功，用户执行关闭成功后的操作");
        })
    });
    $("#openSound").click(function () {
        decoder.openSound();
    });
    $("#closeSound").click(function () {
        decoder.closeSound();
    });
    $("#capturePicture").click(function () {
        /*截图方法1*/
        // decoder.capturePicture(0,'default');
        /*截图方法2*/
        var capturePicturePromise = decoder.capturePicture(0, 'default');
        capturePicturePromise.then(function (data) {
            console.log("截图成功，用户执行关闭成功后的操作", data);
        })
    });
    $("#startSave").click(function () {
        // decoder.startSave(0, (new Date().getTime() + 'video'));
        /*开始录制方法2*/
        var startSavePromise = decoder.startSave(0, (new Date().getTime() + 'video'));
        startSavePromise.then(function (data) {
            console.log("start save success", startSavePromise)
        }).catch(function (error) {
            console.log("start Save error", error)
        })
    });
    $("#stopSave").click(function () {
        /*结束录制方法1*/
        // decoder.stopSave(0);
        /*结束录制方法2*/
        var stopSavePromise = decoder.stopSave(0);
        stopSavePromise.then(function (data) {
            console.log("stop save success", stopSavePromise)
        }).catch(function (error) {
            console.log("stop Save error", error)
        })
    });
    $("#play").click(function () {
        decoder.play();
    });
    $("#fullScreen").click(function () {
        decoder.fullScreen();
    });

    // 获取视频地址
    function getLiveAddress() {
        console.log($("#deviceId").val());
        var params = {
            "deviceId": $("#deviceId").val()
        };
        $.ajax({
            type: "POST",
            url: ctx + "/monitor/getLiveAddress",
            contentType: "application/json",
            dataType: "json",
            data: requestDTO(params),
            success: function (response) {
                if (response.result.code == 200) {
                    // 初始化
                    init(response.body.url, response.body.accessToken);
                } else {
                    alert(response.result.message)
                }
            },
            error: function (e) {
                alert("获取视频地址发生异常")
            }
        });
    }

</script>
</body>

</html>